<template>
	<view>
		<view style="background-color: #19BE6B;width: 100%;height: 100rpx;"></view>
		<view style="margin-top: -80rpx;">
			<view v-if="productPickType" class="card">
				<view class="default-window u-border-bottom">
					<u-section title="提货方式选择" :right="false" line-color="#19be6b"></u-section>
				</view>
				<view class="default-window">
					<u-subsection @change="tabsChange" bgColor="#FFFFFF" buttonColor="#19be6b" active-color="#FFFFFF"
						:list="tabs" :current="choosePickType"></u-subsection>
				</view>

			</view>
			<navigator v-if="choosePickType===0" hover-class="none" url="/pages/address/address?type=choose"
				class="card default-window flex">
				<view class="">
					<u-icon name="map" size="50"></u-icon>
				</view>
				<view v-if="addressInfo.addressId==0" style="padding-left: 30rpx;line-height: 1.8;">
					选择收货地址
				</view>
				<view v-else style="padding-left: 30rpx;line-height: 1.8;flex: 1;">
					<view class="flex place bold">
						<view>{{addressInfo.name}}</view>
						<view>{{addressInfo.phone}}</view>
					</view>
					<view class="u-font-26 u-tips-color">
						{{addressInfo.address}}
					</view>
				</view>
			</navigator>
			<view v-else class="card default-window flex">
				<view class="">
					<u-icon name="bag" size="50"></u-icon>
				</view>

				<view style="padding-left: 30rpx;line-height: 1.8;flex: 1;">
					<view class="flex place bold">
						<view>{{productPcikAddress.name}}</view>
						<view>{{productPcikAddress.service_phone}}</view>
					</view>
					<view class="u-font-26 u-tips-color">
						{{productPcikAddress.address}}
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view v-for="(product,tip) in productList" :key="tip" class="u-border-bottom">
				<view class="default-window flex" style="align-items: flex-start;">
					<view class="product-image">
						<image :src="product.image" style="width:130rpx;height: 130rpx;" mode="aspectFill"></image>
					</view>
					<view class="product-name">
						<view>{{product.name}}</view>
						<view class="u-font-12 u-tips-color">{{product.subtitle}}</view>
						<view class="u-font-12 u-tips-color">{{product.sku_str}}</view>
						<view class="u-font-12 u-tips-color">
							<text v-for="sku in product.sku_info"
								:key="sku.sku_name">{{sku.sku_key}}：{{sku.sku_name}}/</text>
						</view>
						<view class="flex place">
							<view class="font-red bold">￥{{product.discount_price}}</view>
							<view class="u-font-11">×{{product.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="default-window flex place">
				<view></view>
				<view>共{{productList.length}}件商品</view>
			</view>
		</view>
		<view class="card">
			<view class="default-window u-border-bottom">
				<u-section title="支付方式选择" :right="false" line-color="#19be6b"></u-section>
			</view>
			<view class="default-window flex place">
				<view>支付方式</view>
				<view class="flex" style="flex: 1;flex-wrap: wrap;justify-content: flex-end;">
					<view v-for="item in payWayList" :key="item.pay_type" style="margin-left: 10rpx;">
						<u-tag mode="dark" shape="circle" @click="payType=item.pay_type"
							:type="payType==item.pay_type?'success':'info'" :text="item.pay_text"></u-tag>
					</view>


				</view>
			</view>
		</view>
		<view class="card">
			<view class="default-window u-border-bottom">
				<u-section title="订单信息" :right="false" line-color="#19be6b"></u-section>
			</view>
			<view class="default-window flex place">
				<view>订单备注</view>
				<view style="flex: 1;">
					<u-input v-model="remark" input-align='right' placeholder="请输入备注信息"></u-input>
				</view>
			</view>
			<view v-if="choosePickType===0" class="default-window flex place">
				<view>订单运费</view>
				<view>{{totalFee==0?'免运费':totalFee+'元'}}</view>
			</view>
			<view class="default-window flex place">
				<view>支付方式</view>
				<view>
					{{ payWayList.find(item=>{return item.pay_type===payType}).pay_text }}
				</view>
			</view>

			<view class="default-window flex place">
				<view>订单金额</view>
				<view class="font-red">
					<text>￥{{totalPrice}}</text>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="btn-bottom">
			<view class="default-window flex place white">
				<view class="flex">
					合计：<text class="font-red">￥</text><text class="font-red u-font-40 bold">{{totalPrice}}</text><text
						v-if="totalFee!=0 && choosePickType===0">+邮费¥{{totalFee}}</text>
				</view>
				<view>
					<u-button @click="orderSubmit" type="success">结算订单</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productInfo: this.$store.state.product.product,
				num: this.$store.state.product.num,
				skuInfo: this.$store.state.product.sku,
				detailId: this.$store.state.product.skuId || 0,

				productList: [],
				totalPrice: 0,
				totalNeedPoint: 0,
				totalFee: 0,

				remark: '', //备注
				addressInfo: {
					addressId: 0
				},
				payType: 3,
				payWayList: this.$store.state.product.payWay,

				productPickType: 0, // 商品是否为可自体
				productPcikAddress: {
					address: "",
					name: "",
					service_phone: "",
				}, //自体地址列表
				choosePickType: 0,
				tabs: [{
						name: '邮寄'
					},
					{
						name: '自提'
					}
				],
			};
		},
		onShow() {
			this.addressInfo = this.$store.state.address.address;
			let that = this;
			let params = {
				address_id: that.addressInfo.addressId,
				product: JSON.stringify([`${that.productInfo.product_id}_${that.detailId}_${that.num}`]),
				is_cart: 0
			};
			this.$api('Order/freight', params).then(data => {
				if (data.status == 1) {
					this.totalFee = data.data.freight;
				} else {
					this.$showToast(data.msg);
				}

			});
		},
		onReady() {
			if (this.payWayList.length >= 3) {
				this.payType = this.payWayList[2].pay_type
			}
			this.createSettlement();
		},
		methods: {
			//tabs栏点击事件
			tabsChange(e) {
				this.choosePickType = e
			},
			//提交订单
			orderSubmit() {

				let that = this;
				this.$showModal('是否提交订单？', () => {
					uni.showLoading({
						title: '跳转支付'
					});
					if (that.choosePickType === 0 && that.addressInfo.addressId == 0) {
						that.$showToast('请选择收货地址');
						// uni.hideLoading();
						return;
					}
					let product = [];
					let ptemp = that.productList
					for (let n in ptemp) {
						let temp = `${ptemp[n].product_id}_${ptemp[n].product_detail_id}_${ptemp[n].num}`;
						product.push(temp);
					}
					let params = {
						address_id: that.addressInfo.addressId,
						product_list: JSON.stringify(product),
						remark: that.remark,
						pick_type: that.choosePickType,
					};
					that.$api('Order/create', params).then(data => {
						if (data.status == 1) {

							let no = data.data.no;
							let params = {
								pay_type: that.payType,
								no: no,
							};
							this.$api('Pay/order', params).then(data => {
								if (data.status == 1) {

									uni.hideLoading();
									this.$pay(data.data.response).then(data => {
										this.$getD(() => {
											uni.reLaunch({
												url: '/pages/public/success'
											})
										})

									}).catch(res => {
										uni.switchTab({
											url: '/pages/usercenter/usercenter'
										})
										// this.$showToast(res.errMsg)
									})

								} else if (data.status == 2) {
									this.$getD(() => {
										uni.hideLoading();
										uni.reLaunch({
											url: '/pages/public/success'
										})
									})

								} else {
									that.$showToast(data.msg);
								}
							})
						} else {
							uni.hideLoading();
							that.$showToast(data.msg);
						}
					});
				})
			},
			//初始化订单信息
			createSettlement() {
				let params = {
					product_list: JSON.stringify([`${this.productInfo.product_id}_${this.detailId}_${this.num}`])
				};
				this.$api('Order/settlement', params).then(data => {
					if (data.status == 1) {
						this.productList = data.data.product_data;
						this.totalPrice = data.data.all_price;
						this.totalFee = data.data.freight;
						this.productPickType = data.data.pick_type;
						this.productPcikAddress = data.data.pick_address_info;
						if (data.data.address.length != 0) {
							let address = data.data.address[0];
							this.$store.commit('chooseAddress', {
								name: address.name,
								phone: address.phone,
								address: address.complete_street,
								addressId: address.address_id,
							});
							this.addressInfo = this.$store.state.address.address;

						}
					} else {
						this.$showToast(data.msg);
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.btn-bottom {
		width: 100%;
		bottom: 0;
		position: fixed;
	}

	.product-image {
		width: 130rpx;
		height: 130rpx;
	}

	.product-name {
		padding-left: 30rpx;
		flex: 1;
	}
</style>